<template>
  <div class="mask">
    <div class="modal">
      <div class="header">选择使用数量</div>
      <div class="handle-box">
        <button type="button" class="btn reduce" @click="handleReduce">-</button>
        <input type="text" class="num" v-model="val" @input="onInput">
        <button type="button" class="btn add" @click="handleAdd">+</button>
      </div>
      <div class="footer">
        <span @click="handleCloseModal">取消</span>
        <span @click="handleSubmit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
const isNum = /^[1-9]\d*$/;
export default {
  props: ["ticket"],
  data() {
    return {
      val: 1
    };
  },
  methods: {
    handleReduce() {
      if (this.val == 1) {
        return;
      }
      this.val -= 1;
    },
    handleAdd() {
      if (this.val == this.ticket.num) {
        this.$toast(`最多只能使用${this.ticket.num}张水票`);
        return;
      }
      this.val += 1;
    },
    onInput() {
      if (!isNum.test(this.val)) {
        this.$toast("请输入正整数");
        this.val = this.val.substring(0, this.val.length - 1);
      }
    },
    handleCloseModal() {
      this.$emit("close");
    },
    handleSubmit() {
      this.$emit("handleSubmit", this.val);
    }
  }
};
</script>

<style lang="less" scoped>
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;

  .modal {
    width: 85vw;
    background: #fff;
    border-radius: 2vw;
    .header {
      text-align: center;
      padding: 4vw;
      font-size: 4.5vw;
      color: #333;
      margin-bottom: 5vw;
    }
    .handle-box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10vw;
      .btn {
        background: #fff;
        border: 0;
        outline: none;
        font-size: 6vw;
      }
      .num {
        width: 14vw;
        text-align: center;
        margin: 0 2vw;
        background: #f5f5f5;
        border: 0;
        padding: 1vw 0;
        font-size: 4vw;
      }
    }
    .footer {
      display: flex;
      width: 100%;
      flex: 2;
      border-top: 1px solid #f9f9f9;
      font-size: 4vw;
      span {
        flex: 1;
        text-align: center;
        padding: 4vw 0;
      }
      & > span:first-child {
        border-right: 1px solid #f9f9f9;
        color: #8e8e93;
      }
      & > span:last-child {
        color: #008fef;
      }
    }
  }
}
</style>